<template>
    <div v-if="usercolumn.length>0" class="setting-column" v-loading="isSave">
		<div class="setting-column__title">
			<span class="move_b"></span>
			<span class="show_b">{{ $t('scTable.show') }}</span>
			<span class="name_b">{{ $t('scTable.name') }}</span>
			<span class="width_b">{{ $t('scTable.width') }}</span>
			<span class="sortable_b">{{ $t('common.sort') }}</span>
			<span class="fixed_b">{{ $t('scTable.fixed') }}</span>
		</div>
		<div class="setting-column__list" ref="list">
			<ul>
				<li v-for="item in usercolumn" :key="item.prop">
					<span class="move_b">
						<el-tag class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;"/></el-tag>
					</span>
					<span class="show_b">
						<el-switch v-model="item.hide" :active-value="false" :inactive-value="true"></el-switch>
					</span>
					<span class="name_b" :title="item.prop">{{ item.label }}</span>
					<span class="width_b">
						<el-input v-model="item.width" placeholder="auto" size="small"></el-input>
					</span>
					<span class="sortable_b">
						<el-switch v-model="item.sortable"></el-switch>
					</span>
					<span class="fixed_b">
						<el-switch v-model="item.fixed"></el-switch>
					</span>
				</li>
			</ul>
		</div>
		<div class="setting-column__bottom">
			<el-button @click="backDefaul" :disabled="isSave">{{ $t('common.reset') }}</el-button>
			<el-button @click="save" type="primary">{{ $t('common.save') }}</el-button>
		</div>
	</div>
	<el-empty v-else :description="$t('scTable.noColumns')" :image-size="80"></el-empty>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue';
import Sortable from 'sortablejs';

// 接收父组件的传值
const props = defineProps({
    column: { type: Object, default: () => {} },
});
// 定义用于发射更新事件的方法
const emit = defineEmits(['userChange', 'back', 'save']);
const isSave = ref(false);
const usercolumn = ref(JSON.parse(JSON.stringify(props.column||[])));
// 监听 userColumn 的变化
watch(() => usercolumn.value, () => {
  emit('userChange', usercolumn.value);
}, { deep: true });
// 组件挂载时加载数据
onMounted(() => {
	usercolumn.value.length>0 && rowDrop();
});
// rowDrop 方法
const rowDrop = () => {
  const tbody = list.value.querySelector('ul');
  Sortable.create(tbody, {
    handle: ".move",
    animation: 300,
    ghostClass: "ghost",
    onEnd({ newIndex, oldIndex }) {
      const tableData = usercolumn.value;
      const currRow = tableData.splice(oldIndex, 1)[0];
      tableData.splice(newIndex, 0, currRow);
    }
  });
};
// 定义 backDefaul 方法
const backDefaul = () => {
	emit('back', usercolumn.value);
};
// 定义 save 方法
const save = () => {
	emit('save', usercolumn.value);
};
</script>
<style scoped>
	.setting-column__title {border-bottom: 1px solid #EBEEF5;padding-bottom:15px;}
	.setting-column__title span {display: inline-block;font-weight: bold;color: #909399;font-size: 12px;}
	.setting-column__title span.move_b {width: 30px;margin-right:15px;}
	.setting-column__title span.show_b {width: 60px;}
	.setting-column__title span.name_b {width: 140px;}
	.setting-column__title span.width_b {width: 60px;margin-right:15px;}
	.setting-column__title span.sortable_b {width: 60px;}
	.setting-column__title span.fixed_b {width: 60px;}
	.setting-column__list {max-height:314px;overflow: auto;}
	.setting-column__list li {list-style: none;margin:10px 0;display: flex;align-items: center;}
	.setting-column__list li>span {display: inline-block;font-size: 12px;}
	.setting-column__list li span.move_b {width: 30px;margin-right:15px;}
	.setting-column__list li span.show_b {width: 60px;}
	.setting-column__list li span.name_b {width: 140px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;cursor:default;}
	.setting-column__list li span.width_b {width: 60px;margin-right:15px;}
	.setting-column__list li span.sortable_b {width: 60px;}
	.setting-column__list li span.fixed_b {width: 60px;}
	.setting-column__list li.ghost {opacity: 0.3;}
	.setting-column__bottom {border-top: 1px solid #EBEEF5;padding-top:15px;text-align: right;}
	.dark .setting-column__title {border-color: var(--el-border-color-light);}
	.dark .setting-column__bottom {border-color: var(--el-border-color-light);}
</style>